<template>
  <div class="input_number">
    <!-- {{ data.values }} -->
    <el-button :disabled="props.isCustom" :icon="Minus" @click="handelClickDecrement"></el-button>
    <el-input
      :style="{ width: props.width }"
      :max="props.max"
      :min="props.min"
      v-model="data.values"
      :disabled="props.disabled"
      placeholder=""
      @input="handelInputOther"
    ></el-input>
    <el-button :disabled="props.disabled" :icon="Plus" @click="handelClickAdd"></el-button>
  </div>
</template>
<script setup>
import { reactive, defineProps, defineEmits, watch, ref } from "vue";
const emits = defineEmits("update:value", "updateValue");
import { Minus, Plus } from "@element-plus/icons-vue";
const data = reactive({
  values: ""
});
const props = defineProps({
  width: {
    type: String,
    default() {
      return "100%";
    }
  },
  max: {
    type: String,
    default() {
      return "0";
    }
  },
  min: {
    type: String,
    default() {
      return "0";
    }
  },
  value: {
    type: String,
    default() {
      return "0";
    }
  },
  disabled: {
    type: Boolean,
    default() {
      return false;
    }
  },
  isCustom: {
    type: Boolean,
    default() {
      return false;
    }
  }
});

const _value = ref(props.value);
const handelInputOther = v => {
  const resV = v.replace(/[^0-9.]/g, "").replace(/(\..*)\./g, "$1");
  // if (Number(resV) > Number(props.max)) {
  //   data.values = props.max;
  //   emits("update:value", data.values);
  // } else if (Number(resV) < Number(props.min)) {
  //   data.values = props.min;
  //   emits("update:value", data.values);
  // } else {
  //   data.values = resV;
  //   emits("update:value", data.values);
  // }
  data.values = resV;
  emits("update:value", data.values);
  emits("updateValue", props.value);
};
const handelClickDecrement = () => {
  if (data.values <= props.min) {
    return;
  } else {
    data.values = Number(data.values) - 1;
    emits("update:value", data.values);
  }
  // data.values = Number(data.values) - 1;
  //   emits("update:value", data.values);
  emits("updateValue", props.value);
};
const handelClickAdd = () => {
  // if (data.values >= props.max) {
  //   return;
  // } else {
  //   data.values = Number(data.values) + 1;
  //   emits("update:value", data.values);
  // }
  data.values = Number(data.values) + 1;
  emits("update:value", data.values);
  emits("updateValue", props.value);
};
watch(
  () => props.value,
  n => {
    data.values = JSON.parse(JSON.stringify(n));
  },
  { deep: true, immediate: true }
);
</script>
<style scoped lang="scss">
.input_number {
  display: flex;
  align-items: center;
  :deep(.el-input__wrapper) {
    background-color: #fff !important;
    box-shadow: 0px 0px 0px 1px #dcdcdc;
    box-sizing: border-box;
  }
  button {
    width: 32px !important;
    padding: 0 !important;
    margin: 0 6px;
  }
}
</style>
